import styles from './index.less';
import { Layout, Menu, Breadcrumb, Dropdown, Avatar } from 'antd';
import { history } from 'umi';
import {
  CopyOutlined,
  PieChartOutlined,
  AccountBookOutlined,
} from '@ant-design/icons';
import { Link } from "react-router-dom";
const { SubMenu } = Menu;
const { Header, Content, Sider } = Layout;
const menu = (
  <Menu>
    <Menu.Item>个人中心</Menu.Item>
    <Menu.Item>个人设置</Menu.Item>
    <Menu.Divider />
    <Menu.Item>关&emsp;&emsp;于</Menu.Item>
    <Menu.Divider />
    <Menu.Item>退出登录</Menu.Item>
  </Menu>
);

export default function (props: any) {
  function gtogo1() {
    //商品管理
    history.push('/commoditymanagement');
  }

  const datas = [
    { name: '配置', path: '/storeStoreConfig' },
    { name: '门店', path: '/storeAllStore' },
    { name: '商品', path: '/storeGoods' },
    { name: '订单', path: '/storeOrder' },
    { name: '提现', path: '/storeWithDrawal' },
    { name: '到店付款', path: '/storeShopPayment' },
  ];
  const towdata = [{ name: '支付', path: '/SmallApplet' }];

  function gtogo2() {
    //商品分类
    history.push('/goodscategory');
  }

  function gtogo3() {
    //商品规格
    history.push('/commercialspecification');
  }

  function gtogo4() {
    //商品评论
    history.push('/storeApplyList');
  }

  function goTo(e: any) {
    history.push(e);
  }

  return (
    <div className={styles.container}>
      <div id="components-layout-demo-top-side-2">
        <Layout>
          <Header className={styles.header}>
            宏烨找房后台管理系统
            <div className={styles.setUp}>
              <Dropdown overlay={menu}>
                <div>
                  <Avatar
                    size="default"
                    src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
                  />
                  张三
                </div>
              </Dropdown>
            </div>
          </Header>
          <Layout>
            <Sider
              width={200}
              style={{
                height: '100vh',
                overflowY: 'auto',
                background: 'white',
              }}
              className="site-layout-background"
            >
              <div className={styles.namse}>管理员</div>
              <Menu
                mode="inline"
                defaultSelectedKeys={['1']}
                defaultOpenKeys={['sub1']}
                style={{ height: '100%', borderRight: 0 }}
                onSelect={(e) => {
                  props.history.push({ pathname: e.key });
                }}
                style={{ height: '60vh', borderRight: 0 }}
              >
                <Menu.Item key="/home" icon={<PieChartOutlined />}>
                  {' '}
                  工作台
                </Menu.Item>
                <SubMenu
                  key="gwx"
                  title={
                    <span className={styles.title}>
                      <AccountBookOutlined />
                      &emsp;商品
                    </span>
                  }
                >
                  <Menu.Item key="gwx1" onClick={() => gtogo1()}>
                    商品管理
                  </Menu.Item>
                  <Menu.Item key="gwx2" onClick={() => gtogo2()}>
                    商品分类
                  </Menu.Item>
                  <Menu.Item key="gwx3" onClick={() => gtogo3()}>
                    商品规格
                  </Menu.Item>
                  <Menu.Item key="gwx4" onClick={() => gtogo4()}>
                    商品评价
                  </Menu.Item>
                </SubMenu>
                <SubMenu
                  key="sub1"
                  title={
                    <span className={styles.title}>
                      <CopyOutlined />
                      &emsp;订单
                    </span>
                  }
                >
                  <Menu.Item key="/home/orderList">订单管理</Menu.Item>
                  <Menu.Item key="/home/summary">订单概述</Menu.Item>
                  <Menu.Item key="/home/evaluate">评价管理</Menu.Item>
                  <Menu.Item key="/home/distribution">订单配送</Menu.Item>
                  <Menu.Item key="1">订单管理</Menu.Item>
                  <Menu.Item key="2">订单概述</Menu.Item>
                  <Menu.Item key="3">评价管理</Menu.Item>
                  <Menu.Item key="4">订单配送</Menu.Item>
                </SubMenu>
                <SubMenu
                  key="jf"
                  title={
                    <span className={styles.title}>
                      <AccountBookOutlined />
                      &emsp;门店
                    </span>
                  }
                >
                  {datas.map((e) => (
                    <Menu.Item key={e.name} onClick={() => goTo(e.path)}>
                      {e.name}
                    </Menu.Item>
                  ))}
                </SubMenu>
                <SubMenu
                  key="jf1"
                  title={
                    <span className={styles.title}>
                      <AccountBookOutlined />
                      &emsp;小程序
                    </span>
                  }
                >
                  {towdata.map((e) => (
                    <Menu.Item key={e.name} onClick={() => goTo(e.path)}>
                      {e.name}
                    </Menu.Item>
                  ))}

                </SubMenu>
                <SubMenu
                    key="营销"
                    title={
                      <span className={styles.title}>
                        <CopyOutlined />
                        &emsp;营销
                      </span>
                    }
                  >
                       <SubMenu
                      key="秒杀管理"
                      title={
                        <span className={styles.title}>
                          <CopyOutlined />
                          &emsp;秒杀管理
                        </span>
                      }
                    >
                      <Menu.Item key="/seckill">
                        <Link to="/seckill"> 秒杀配置</Link>
                      </Menu.Item>
                      <Menu.Item key="/seckillShop">
                        <Link to="/seckillShop"> 秒杀商品</Link>
                      </Menu.Item>
                    </SubMenu>
                    <SubMenu
                      key="砍价管理"
                      title={
                        <span className={styles.title}>
                          <CopyOutlined />
                          &emsp;砍价管理
                        </span>
                      }
                    >
                      <Menu.Item key="/bargainShop">
                        <Link to="/bargainShop"> 砍价商品</Link>
                      </Menu.Item>
                      <Menu.Item key="/bargainList">
                        <Link to="/bargainList"> 砍价列表</Link>
                      </Menu.Item>
                    </SubMenu>
                    <SubMenu
                      key="直播管理"
                      title={
                        <span className={styles.title}>
                          <CopyOutlined />
                          &emsp;直播管理
                        </span>
                      }
                    >
                      <Menu.Item key="/liveList">
                        <Link to="/liveList"> 直播列表</Link>
                      </Menu.Item>
                    </SubMenu>


                    <SubMenu
                      key="拼团管理"
                      title={
                        <span className={styles.title}>
                          <CopyOutlined />
                          &emsp;拼团管理
                        </span>
                      }
                    >
                      <Menu.Item key="/groupShop">
                        <Link to="/groupShop"> 拼团商品</Link>
                      </Menu.Item>
                      <Menu.Item key="/groupList">
                        <Link to="/groupList"> 拼团列表</Link>
                      </Menu.Item>
                    </SubMenu>

                  </SubMenu>
              </Menu>
            </Sider>
            <Layout>
              <Content className={styles.Content}>{props.children}</Content>
            </Layout>
          </Layout>
        </Layout>
      </div>
    </div>
  );
}
